<template>
    <section>
        <el-form :inline="true" :rules="rule" :model="form" ref="form" label-width="120">
            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="必须填写"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-input v-model="form.type" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="标签" prop="tag">
                <el-input v-model="form.tag" placeholder=""></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="submit">提交文章</el-button>
            </el-form-item>
        </el-form>
        <mavon-editor v-model="value" ref="md" @imgAdd="imgAdd" @save="save" @imgDel="imgDel" :ishljs="true"/>
    </section>
</template>
<script>
    /* eslint-disable indent,space-before-function-paren */

    import {getImageUrl, AddArticle, UpdateArticle} from '../../api/api'
    import {Upload} from '../../public/util'

    export default {
        data() {
            return {
                value: '',
                form: {
                    title: '',
                    type: '',
                    tag: ''
                },
                rule: {
                    title: [
                        {required: true, message: '必须填写', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            imgAdd(pos, file) {
                Upload(file, 'article', (x) => {
                    this.$refs.md.$img2Url(pos, getImageUrl(x))
                })
            },
            imgDel() {

            },
            submit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (this.form.id) {
                            UpdateArticle({
                                title: this.form.title,
                                article: this.value,
                                type: this.form.type,
                                tag: this.form.tag,
                                id: this.form.id
                            }).then(
                                data => {
                                    console.log(data)
                                    this.$message.success('更新成功')
                                    this.$router.push({path: '/article/list'})
                                }
                            ).catch()
                        } else {
                            AddArticle({
                                title: this.form.title,
                                article: this.value,
                                type: this.form.type,
                                tag: this.form.tag,
                            }).then(
                                data => {
                                    this.$message.success('新增成功')
                                    this.$router.push({path: '/article/list'})
                                }
                            ).catch()
                        }
                    } else {
                        this.$message.error('文章标题和文章id不可以为空')
                        return false
                    }
                })
            },
            save() {
                console.log('save')
                this.submit()
            }

        },
        mounted() {
            if (this.$route.query.update) {
                var c = window.sessionStorage.getItem('article')
                c = JSON.parse(c)
                this.form.title = c.title
                this.form.type = c.type
                this.form.tag = c.tag
                this.form.id = c.id
                this.value = c.value
            } else {
                this.form = {
                    title: '',
                    type: '',
                    tag: ''
                }
            }
        }
    }
</script>
<style>

</style>
